import { px2rem } from "@/assets/global-style";
import styled from "styled-components";

export const Wrapper=styled.div`
    .search_wrapper{
        margin: ${px2rem(8)} ${px2rem(16)} ${px2rem(16)} ${px2rem(16)};
        .search_bar{
            display: flex;
            align-items: center;
            background-color: #e1e1e1;
            border-radius: ${px2rem(20)};
            padding: 0 ${px2rem(20)};
            .icon_search{
                font-size: ${px2rem(28)};
                color: green;
                font-weight: bold;
            }
        }
    }
`

export const QuickEntraceWrapper=styled.div`
    height: ${px2rem(210)};
    display: flex;
    flex-direction: column;
    flex-wrap:wrap;
    justify-content: space-between;
    align-items: center;
    .entrance_item_wrapper{
        width: ${px2rem(80)};
        height: ${px2rem(100)};
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        .entrance_item_icon{
            width: ${px2rem(50)};
            height: ${px2rem(50)};
            .img_icon{
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }
        .entrance_item_title{
            font-size: ${px2rem(16)};
        }
    }
`
export const RecommendCourseWrapper=styled.div`
    margin-top: ${px2rem(16)};
    .wrapper_title{
        margin: 0 ${px2rem(16)};
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title{
            font-weight: bold;
            
            letter-spacing: ${px2rem(2)};
        }
        .button_more{
            position: relative;
            width: ${px2rem(100)};
            height: ${px2rem(28)};
            line-height: ${px2rem(28)};
            font-size: ${px2rem(14)};
            text-align: center;
            border-radius: ${px2rem(14)};
            &::after{
                position: absolute;
                bottom: 0;
                /* z-index: -1; */
                width: 200%;
                height: 200%;
                content: "";
                display: block;
                border: ${px2rem(1)} solid black;
                border-radius: ${px2rem(28)};
                transform: scale(0.5);
                transform-origin: left bottom;
            }
        }
    }
`

export const RecommendVideoWrapper=styled.div`
    margin-top: ${px2rem(32)};
    .wrapper_title{
        font-size: ${px2rem(20)};
        font-weight: bold;
        margin: 0 ${px2rem(16)};
    }
    .video_tabs_wrapper{
        margin: ${px2rem(8)} ${px2rem(8)};
        .adm-tabs-header{
            border: none;
        }
    }
`